<template>
    <div class="container">
        <h1>Vue 3 组件示例</h1>
        父组件信息：{{ parentMessage }}
        <button @click="count++">加1</button>
        <!-- :message="'你好子组件'":
        这是一个 prop 绑定，将字符串 '你好子组件' 作为 message 属性传递给 ChildComponent。 -->
        <!-- @updateMessage="updateMessage":
        这是一个事件监听器，表示当 ChildComponent 发出 updateMessage 事件时，
        父组件中的 updateMessage 方法将被调用。 -->
        <childComponent :message="'你好子组件'" @updateMessage="updateMessage" />
        <childComponent2 :count="count" />
    </div>
</template>

<script setup>
import { ref } from 'vue';
import childComponent from './childComponent.vue';
import childComponent2 from './childComponent2.vue';

const parentMessage = ref('Hello from Parent!');
const count = ref(0);

const updateMessage = (newMessage) => {
    parentMessage.value = newMessage;
};

</script>

<style scoped>
h1 {
    color: #42b983;
}

.container {
    text-align: center;
    margin-top: 50px;
    background-color: rgb(187, 187, 187);
    border-radius: 15px;
    padding: 10px;
    margin: 20px;
}
</style>